<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分销套餐包订单列表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
    <style>
        .fxOrderList-container {
            padding: 20px;
        }

        td[data-field="imgUrl"] div,
        td[data-field="negativeImgUrl"] div {
            height: 120px;
        }

        .lay-form {
            padding: 20px;
        }

        .fxOrderList-container {
            background-color: #fff;
        }

        .bar {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }

        .searchInput {
            display: flex;
            align-items: flex-end;
        }

        .searchInput input {
            width: 200px;
        }

        .searchInput .layui-form-label {
            padding: 9px 0;
        }

        .bar .layui-form-label {
            padding: 0;
            padding-bottom: 4px;
            text-align: left;
        }

        .bar .layui-inline {
            margin-right: 20px;
        }

        .layui-table img {
            max-width: 200px;
            object-fit: contain;
        }

        .layui-table-cell {
            height: auto;
        }

        #accountLayer .layui-form-label {
            width: 94px;
        }

        .layui-input-block {
            margin-left: 124px;
        }

        .upload {
            width: 150px;
            height: 150px;
            border: 1px solid #e8e8e8;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .upload img {
            width: 100%;
        }

        .upload i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
        }
    </style>
</head>

<body>
<div class="fxOrderList-container">

    <!-- 搜索 -->
    <div class="searchInput">
        <form class="layui-form" action="" lay-filter="resets">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户昵称：</label>
                    <input class="layui-input" name="userName" placeholder="请输入客户昵称" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单号：</label>
                    <input class="layui-input" name="orderNo" placeholder="请输入订单号" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建日期：</label>
                    <input type="text" class="layui-input" id="test1" name="settleTimeStart" placeholder="请输入购买时间" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload" lay-submit="" lay-filter="searchForm">搜索</button>
                <button class="layui-btn layui-btn-primary" data-type="reload" lay-submit="" lay-filter="reset">重置</button>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-form-item" style="margin-bottom:0">
                        <label class="layui-form-label" style="text-align:right; font-size:14px;padding: 9px 0;">支付方式：</label>
                        <div class="layui-input-block" style="margin-left: 80px; margin-top: 16px;">
                            <select name="payType" lay-filter="selectPay">
                                <option value="">全部</option>
                                <option value="1">微信支付</option>
                                <option value="2">支付宝支付</option>
                                <option value="5">线下现金购买</option>
                                <option value="6">线下转账购买</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 筛选 -->
                <div class="layui-inline">
                    <div class="layui-form-item" id="status" style="margin-bottom:0">
                        <label class="layui-form-label" style="text-align:right; font-size:14px;padding: 9px 0;">订单状态：</label>
                        <div class="layui-input-block" style="margin-left: 80px; margin-top: 16px;">
                            <select name="stop" lay-filter="select">
                                <option value="">全部</option>
                                <option value="20000">未支付</option>
                                <option value="21000">待到账</option>
                                <option value="30000">已支付</option>
                                <option value="40000">已关单</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <table lay-filter="fxOrderListTable" class="layui-hide" id="fxOrderListTable"></table>
</div>

<div id="accountLayer" style="display:none;padding: 10px 50px;">
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">支付方式:</label>
            <div class="layui-input-block">
                <select name="payType" disabled lay-filter="payType">
                    <option value="1">微信支付</option>
                    <option value="2">支付宝支付</option>
                    <option value="3">中级分红购买</option>
                    <option value="7">高级分红购买</option>
                    <option value="4">财富购买</option>
                    <option value="5">线下现金购买</option>
                    <option value="6">线下转账购买</option>
                    <option value="8">收益购买</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付金额(元):</label>
            <div class="layui-input-block">
                <input type="text" name="price" lay-verify="title" disabled autocomplete="off" placeholder="金额" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="receiptUrl" class="receiptUrl" />
        <input type="hidden" name="orderId" class="orderId" />

        <div class="layui-form-item">
            <label class="layui-form-label">上传凭证:</label>
            <div class="layui-input-block">
                <div class="upload" id="voucherUpload">
                    <i class="layui-icon layui-icon-addition" style="font-size: 30px;color:#e8e8e8;"></i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="submit" style="margin-left: 124px;" class="layui-btn" lay-submit="" lay-filter="submitAccount">立即提交</button>
        </div>
    </form>
</div>

</body>

<!-- 操作 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs {{ d.orderStatus*1 == 30000 || d.orderStatus*1 == 40000?'':'layui-btn-disabled'}}" lay-event="detail">查看详情</a>
    {{# if( (d.payType*1 == 5 || d.payType*1 == 6) && ( d.orderStatus*1 == 21000) ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="account">到账</a>
    {{# } }}
</script>
<script type="text/html" id="receiptImg">
    {{# if( d.receiptUrl ) { }}
    <img src="{{d.receiptUrl}}" /> {{# } }}
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
<script src="../utils.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', "laydate", "upload"], function() {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            $ = layui.jquery;
        form.render();
        table.render({
            elem: '#fxOrderListTable',
            url: window.baseUrl + '/distribution/getDistributionOrderList',
            method: 'post',
            contentType: 'application/json',
            headers: {
                Authorization: localStorage.token
            },
            where : {'orderTypeList' : [1]},
            response: {
                statusCode: 200 //规定成功的状态码，默认：0
            },
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": 200,
                    "count": res.data.recordsTotal, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            request: {
                pageName: 'start', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            cols: [
                [{
                    field: 'orderNo',
                    title: '订单编号'
                },
                {field: "distributionName",
                    title: '分销商名称'
                }, {
                    field: 'rank',
                    title: '排名',
                    width: 130,
                    templet: function(res) {
                        vipName = res.vipOrders?res.vipOrders == 1?'  (优先排)':'':'';
                        rankName = res.rank ?res.rank :'-';
                        return rankName+vipName;
                    },
                    sort: true
                }, {
                    field: 'orderStatus',
                    title: '是否支付',
                    templet: function(res) {
                        return res.orderStatus == 40000 ? "已关单" : res.orderStatus == 30000?"已支付":"未支付";
                    }
                }, {
                    field: 'payType',
                    title: '支付方式',
                    templet: function(res) {
                        var payName = '-';
                        switch(res.payType * 1) {
                            case 1:
                                payName = '微信支付';
                                break;
                            case 2:
                                payName = '支付宝支付';
                                break;
                            case 3:
                                payName = '中级分红购买';
                                break;
                            case 4:
                                payName = '财富购买';
                                break;
                            case 5:
                                payName = '线下现金购买';
                                break;
                            case 6:
                                payName = '线下转账购买';
                                break;
                            case 7:
                                payName = '高级分红购买';
                                break;
                        }
                        return payName;
                    }
                }, {
                    field: "levelFlagQueue",
                    title: '当前级别',
                    templet: function(res) {
                        return res.levelFlagQueue == 'GAO_JI' ? '高级' : res.levelFlagQueue == 'ZHONG_JI'?'中级':res.levelFlagQueue == 'CHAO_GAO_JI'?"财富":'-';
                    }
                }, {
                    field: 'userName',
                    title: '购买人',
                    templet: function(res) {
                        return res.userName ? res.userName : '-'
                    }
                }, {
                    field: "userPhone",
                    title: '手机号'
                }, {
                    field: 'distributionOrderGoodsVo',
                    title: '价格（元）',
                    templet: function(res) {
                        return res.distributionOrderGoodsVo && res.distributionOrderGoodsVo.price ? res.distributionOrderGoodsVo.price : '-'
                    }
                }, {
                    field: 'receiptUrl',
                    title: '支付凭证',
                    templet: function(res) {
                        return res.receiptUrl?"<img style='width:100px; height:100px; object-fit: contain;' class='viewImg' src='" + res.receiptUrl + "'/>":"";
                    }
                }, {
                    field: "createTime",
                    title: '时间'
                }, {
                    title: '操作',
                    toolbar: '#barDemo'
                }]
            ],
            page: true,
            done: function() {
                // 放大图片
                $(".viewImg").on("click", function() {
                    let url = $(this).attr("src");
                    console.log(url)
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['auto'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: "<img src='" + url + "'/>"
                    });
                })
            }
        });

        laydate.render({
            elem: '#test1',
            range: true
        });

        // 搜索
        form.on("submit(searchForm)", function(e) {

            if(e.field.settleTimeStart) {
                var a = e.field.settleTimeStart.split(" - ");
                e.field.settleTimeStart = new Date(a[0]).getTime();
                e.field.settleTimeEnd = new Date(a[1]).getTime();
            }

            table.reload('fxOrderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                },
                where: e.field
            });

            return false;
        })

        // 搜索
        form.on("submit(reset)", function(e) {
            table.reload('fxOrderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                },
                where: null
            });

            form.val("resets", {
                userName: "",
                orderNo: "",
                settleTimeStart: "",
                distributionName: "",
                stop: "",
                levelFlagQueue: "",
                payType: ""
            });

            return false;
        })
        // 支付方式
        form.on("select(selectPay)", function(e) {
            table.reload('fxOrderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                },
                where: {
                    payType: e.value
                }
            });
        })
        // 筛选状态
        form.on("select(select)", function(e) {

            table.reload('fxOrderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                },
                where: {
                    orderStatus: e.value
                }
            });
        })
        // 筛选状态
        form.on("select(selectCurrLevel)", function(e) {
            if(e.value == ''){
                table.reload('fxOrderListTable', {
                    page: {
                        start: 1 //重新从第 1 页开始
                    },
                    where: {
                        levelFlagQueue: null
                    }
                });
            }else{
                table.reload('fxOrderListTable', {
                    page: {
                        start: 1 //重新从第 1 页开始
                    },
                    where: {
                        levelFlagQueue: e.value
                    }
                });
            }

        })
        var receiptUrl = '';
        table.on('tool(fxOrderListTable)', function(obj) {
            var data = obj.data; //获得当前行数据
            console.log(data);
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail') { //查看
                if(data.orderStatus * 1 != 30000 && data.orderStatus * 1 != 40000) {
                    return false;
                }
                window.location.href = './getFxPackageOrderDetail.html?pId=' + data.id;
            } else if(layEvent === 'account') {
                layer.open({
                    type: 1,
                    title: '确认到账/收款',
                    area: ['1000px', '800px'],
                    shadeClose: false,
                    skin: 'yourclass',
                    content: $("#accountLayer")
                });
                $(".upload").css("width","500PX");
                $(".upload").css("height","500PX");
                form.val('example', {
                    payType: data.payType,
                    price: data.price,
                });
                $(".orderId").val(data.id);
                if(data.receiptUrl) {
                    $('#voucherUpload').append('<img  class="viewImg" src="' + data.receiptUrl + '"/>');
                    $(".receiptUrl").val(data.receiptUrl);
                    $('#voucherUpload i').hide();
                } else {
                    $(".receiptUrl").val("");
                    $('#voucherUpload').html('<i class="layui-icon layui-icon-addition" style="font-size: 30px;color:#e8e8e8;"></i>');
                    $('#voucherUpload i').show();
                }
            }
        });
        form.on("submit(submitAccount)", function(data) {
            var {
                orderId,
                receiptUrl
            } = data.field
            ajax({
                path: window.baseUrl +"/distribution/reviewOfflineOrder",
                type: 'POST',
                data: {
                    id: orderId,
                    receiptUrl: receiptUrl
                },
                success: function(res) {
                    console.log(res)
                    layer.msg('提交成功');
                    layer.closeAll();
                    table.reload("fxOrderListTable");
                }
            }, $)
            return false;
        })

        var uploadInst = upload.render({
            elem: '#voucherUpload',
            url: window.baseUrl +'/file/uploadFile',
            headers: {
                Authorization: localStorage.token
            },
            before: function(obj) {
                obj.preview(function(index, file, result) {
                    $('#voucherUpload').append('<img class="viewImg" src="' + result + '"/>');
                    $('#voucherUpload i').hide();
                    $(".upload").css("width","100%");
                    $(".upload").css("height","100%");
                });
            },
            done: function(res) {
                if(res.code * 1 == 200) {
                    receiptUrl = res.data;
                    $(".receiptUrl").val(res.data);

                } else {
                    return layer.msg('上传失败');
                }
                //上传成功
            },
            error: function() {
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            }
        });

    });
</script>

</html>